<template>
	<div class="card-style">
		<div class="card-style-title">
			{{ info1 }}
		</div>
		<div class="card-style-list">
			<div v-for="(item, index) in info2" :key="index" class="card-style-item">
				<div class="card-style-item-label">{{ item.label }}</div>
				<div class="card-style-item-progress">
					<div :class="['card-style-item-bar', 'card-style-item-bar-color-' + (index + 1)]" :style="{ width: item.value + '%' }"></div>
				</div>
				<div class="card-style-item-value">{{ item.value + '%' }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		info1: String,
		info2: Array,
	},
};
</script>

<style scoped lang="scss">
.card-style {
	display: flex;
	flex-direction: column;
	background: #f9f9fb;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 7px;
	.card-style-title {
		font-size: 12px;
		font-weight: bold;
		padding: 5px 0;
	}
	.card-style-list {
		display: flex;
		flex-direction: column;
		gap: 5px;
		.card-style-item {
			display: flex;
			justify-content: center;
			align-items: center;
			.card-style-item-label {
				flex: 0 auto;
				width: 68px;
				font-size: 12px;
				color: #999;
			}
			.card-style-item-progress {
				flex: 1;
				background: #e4edfc;
				overflow: hidden;
				position: relative;
				border-radius: 5px;
				height: 8px;
				.card-style-item-bar {
					position: absolute;
					top: 0;
					left: 0;
					width: 30%;
					height: 100%;
					border-radius: 5px;
					&-color-1 {
						background: linear-gradient(to right, #a8c7f7, #3b7cf1);
					}
					&-color-2 {
						background: linear-gradient(to right, #b1dfc8, #2bb362);
					}
					&-color-3 {
						background: linear-gradient(to right, #e3e6ed, #b3bed3);
					}
				}
			}
			.card-style-item-value {
				flex: 0 auto;
				min-width: 20px;
				font-size: 12px;
				padding: 0 0 0 10px;
			}
		}
	}
}
</style>
